<template>
	<view class="fix-main-bg"></view>
	<view class="main">
		<view class="flex-between" style="	padding: 50rpx 12rpx 20rpx 20rpx;
	font-size: 24rpx;" >
			<view class="" style="color: #e42020">显意识</view>
			<view class="">潜意识</view>
		</view>

		<view class="main-content dark-theme" :class="themeClass">
			<view class="left-side">
				<view class="left-side-item" v-for="item in resultShowList">
					<view>
						<image class="icon-size" :src="item.imageUrl" mode="" style="vertical-align: middle;"></image>
					</view>
					<view>{{ item.num }}</view>
					<i class="iconfont icon-sanjiaoxing1 sanjiao-size sanjiao-position" ></i>
				</view>
			</view>
			<view class="center-content">
				<!-- 左边箭头 -->
				<view class="arrow-left">
					<view class="arrow-left-one">
						<view class="arrow-left-one-triangle"></view>
						<view class="arrow-left-one-cube">
							<view class="" style="position: relative">
								<view class="">6</view>
								<text
									class="iconfont icon-hexagon sanjiao-size"
									style="position: absolute; top: -11rpx; font-size: 40rpx !important; right: -15rpx; transform: rotate(30deg)"
								></text>
							</view>
							<view class="" style="position: relative">
								<view class="">5</view>
								<text
									class="iconfont icon-xiangshangsanjiaoxing sanjiao-size"
									style="position: absolute; top: -16rpx; font-size: 48rpx !important; right: -20rpx"
								></text>
							</view>
						</view>
					</view>
					<view class="arrow-left-two">
						<view class="arrow-left-two-triangle"></view>
						<view class="arrow-left-two-cube">
							<view class="" style="position: relative">
								<view class="">1</view>
								<text
									class="iconfont icon-hexagon sanjiao-size"
									style="position: absolute; top: -11rpx; font-size: 40rpx !important; right: -17rpx; transform: rotate(30deg)"
								></text>
							</view>
							<view class="" style="position: relative">
								<view class="">4</view>
								<text
									class="iconfont icon-xiangshangsanjiaoxing sanjiao-size"
									style="position: absolute; top: -16rpx; font-size: 48rpx !important; right: -19rpx"
								></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 人类图背景 -->
				<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/humanBg.png" style="width: 100%; height: 800rpx"></image>
				<!-- 人类图结构绘制 -->
				<!-- 				<view class="center-content-main-canvas">
					<canvas style="width: 100%; height: 100%" id="humanCanvas" canvas-id="humanCanvas" ref="canvas"></canvas>
				</view> -->
				<view class="center-content-main">
					<view class="center-content-main-energy">
						<!-- 能量中心1 -->
						<view class="center-content-main-energy-item1">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/triangle-white.png" class="center-content-main-energy-item1-img"></image>
							<view class="center-content-main-energy-item1-num size-8">
								<text :class="bgClass(64, 1)">64</text>
								<text :class="bgClass(61, 1)">61</text>
								<text :class="bgClass(63, 1)">63</text>
							</view>
						</view>
						<view class="item12-lines">
							<view class="item12-lines-line1">
								<view class="item12-lines-line1-top">
									<view class="item12-lines-line1-top-left" :class="lineClass(64, 'top', 'left')"></view>
									<view class="item12-lines-line1-top-right" :class="lineClass(64, 'top', 'right')"></view>
								</view>
								<view class="item12-lines-line1-bottom">
									<view class="item12-lines-line1-bottom-left" :class="lineClass(47, 'bottom', 'left')"></view>
									<view class="item12-lines-line1-bottom-right" :class="lineClass(47, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item12-lines-line2">
								<view class="item12-lines-line2-top">
									<view class="item12-lines-line2-top-left" :class="lineClass(61, 'top', 'left')"></view>
									<view class="item12-lines-line2-top-right" :class="lineClass(61, 'top', 'right')"></view>
								</view>
								<view class="item12-lines-line2-bottom">
									<view class="item12-lines-line2-bottom-left" :class="lineClass(24, 'bottom', 'left')"></view>
									<view class="item12-lines-line2-bottom-right" :class="lineClass(24, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item12-lines-line3">
								<view class="item12-lines-line3-top">
									<view class="item12-lines-line3-top-left" :class="lineClass(63, 'top', 'left')"></view>
									<view class="item12-lines-line3-top-right" :class="lineClass(63, 'top', 'right')"></view>
								</view>
								<view class="item12-lines-line3-bottom">
									<view class="item12-lines-line3-bottom-left" :class="lineClass(4, 'bottom', 'left')"></view>
									<view class="item12-lines-line3-bottom-right" :class="lineClass(4, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="center-content-main-energy-item2">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/triangle-white.png" class="center-content-main-energy-item2-img"></image>
							<view class="center-content-main-energy-item2-num1 size-8">
								<text :class="bgClass(47, 2)">47</text>
								<text :class="bgClass(24, 2)">24</text>
								<text :class="bgClass(4, 2)" style="padding: 0 8rpx">4</text>
							</view>
							<view class="center-content-main-energy-item2-num2 size-8">
								<text :class="bgClass(17, 2)">17</text>
								<text :class="bgClass(11, 2)">11</text>
							</view>
							<view class="center-content-main-energy-item2-num3 size-8">
								<text :class="bgClass(43, 2)">43</text>
							</view>
						</view>
						<view class="item23-lines">
							<view class="item23-lines-line1">
								<view class="item23-lines-line1-top">
									<view class="item23-lines-line1-top-left" :class="lineClass(17, 'top', 'left')"></view>
									<view class="item23-lines-line1-top-right" :class="lineClass(17, 'top', 'right')"></view>
								</view>
								<view class="item23-lines-line1-bottom">
									<view class="item23-lines-line1-bottom-left" :class="lineClass(62, 'bottom', 'left')"></view>
									<view class="item23-lines-line1-bottom-right" :class="lineClass(62, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item23-lines-line2">
								<view class="item23-lines-line2-top">
									<view class="item23-lines-line2-top-left" :class="lineClass(43, 'top', 'left')"></view>
									<view class="item23-lines-line2-top-right" :class="lineClass(43, 'top', 'right')"></view>
								</view>
								<view class="item23-lines-line2-bottom">
									<view class="item23-lines-line2-bottom-left" :class="lineClass(23, 'bottom', 'left')"></view>
									<view class="item23-lines-line2-bottom-right" :class="lineClass(23, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item23-lines-line3">
								<view class="item23-lines-line3-top">
									<view class="item23-lines-line3-top-left" :class="lineClass(11, 'top', 'left')"></view>
									<view class="item23-lines-line3-top-right" :class="lineClass(11, 'top', 'right')"></view>
								</view>
								<view class="item23-lines-line3-bottom">
									<view class="item23-lines-line3-bottom-left" :class="lineClass(56, 'bottom', 'left')"></view>
									<view class="item23-lines-line3-bottom-right" :class="lineClass(56, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="center-content-main-energy-item3">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/cube-yellow.png" class="center-content-main-energy-item3-img"></image>
							<view class="center-content-main-energy-item3-num1 size-8">
								<text :class="bgClass(62, 3)">62</text>
								<text :class="bgClass(23, 3)">23</text>
								<text :class="bgClass(56, 3)">56</text>
							</view>
							<view class="center-content-main-energy-item3-num2 size-8">
								<text :class="bgClass(16, 3)">16</text>
								<text :class="bgClass(20, 3)">20</text>
							</view>
							<view class="center-content-main-energy-item3-num3 size-8">
								<text :class="bgClass(35, 3)">35</text>
								<text :class="bgClass(12, 3)">12</text>
								<text :class="bgClass(45, 3)">45</text>
							</view>
							<view class="center-content-main-energy-item3-num4 size-8">
								<text :class="bgClass(31, 3)">31</text>
								<text :class="bgClass(8, 3)" style="padding: 0 8rpx">8</text>
								<text :class="bgClass(33, 3)">33</text>
							</view>
						</view>
						<view class="item34-lines">
							<view class="item34-lines-line1">
								<view class="item34-lines-line1-top">
									<view class="item34-lines-line1-top-left" :class="lineClass(31, 'top', 'left')"></view>
									<view class="item34-lines-line1-top-right" :class="lineClass(31, 'top', 'right')"></view>
								</view>
								<view class="item34-lines-line1-bottom">
									<view class="item34-lines-line1-bottom-left" :class="lineClass(7, 'bottom', 'left')"></view>
									<view class="item34-lines-line1-bottom-right" :class="lineClass(7, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item34-lines-line2">
								<view class="item34-lines-line2-top">
									<view class="item34-lines-line2-top-left" :class="lineClass(8, 'top', 'left')"></view>
									<view class="item34-lines-line2-top-right" :class="lineClass(8, 'top', 'right')"></view>
								</view>
								<view class="item34-lines-line2-bottom">
									<view class="item34-lines-line2-bottom-left" :class="lineClass(1, 'bottom', 'left')"></view>
									<view class="item34-lines-line2-bottom-right" :class="lineClass(1, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item34-lines-line3">
								<view class="item34-lines-line3-top">
									<view class="item34-lines-line3-top-left" :class="lineClass(33, 'top', 'left')"></view>
									<view class="item34-lines-line3-top-right" :class="lineClass(33, 'top', 'right')"></view>
								</view>
								<view class="item34-lines-line3-bottom">
									<view class="item34-lines-line3-bottom-left" :class="lineClass(13, 'bottom', 'left')"></view>
									<view class="item34-lines-line3-bottom-right" :class="lineClass(13, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="center-content-main-energy-item4">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/cube-white.png" class="center-content-main-energy-item4-img"></image>
							<view class="center-content-main-energy-item4-num1 size-8">
								<text :class="bgClass(10, 3)">10</text>
								<text :class="bgClass(7, 3)" style="padding: 0 8rpx">7</text>
								<text :class="bgClass(1, 3)" style="padding: 0 8rpx">1</text>
							</view>
							<view class="center-content-main-energy-item4-num2 size-8">
								<text :class="bgClass(2, 3)" style="padding: 0 8rpx">2</text>
								<text :class="bgClass(46, 3)">46</text>
								<text :class="bgClass(25, 3)">25</text>
							</view>
							<view class="center-content-main-energy-item4-num3 size-8">
								<text :class="bgClass(15, 3)">15</text>
							</view>
							<view class="center-content-main-energy-item4-num4 size-8">
								<text :class="bgClass(13, 3)">13</text>
							</view>
						</view>
						<view class="item49-lines">
							<view class="item49-lines-line1">
								<view class="item49-lines-line1-top">
									<view class="item49-lines-line1-top-left" :class="lineClass(15, 'top', 'left')"></view>
									<view class="item49-lines-line1-top-right" :class="lineClass(15, 'top', 'right')"></view>
								</view>
								<view class="item49-lines-line1-bottom">
									<view class="item49-lines-line1-bottom-left" :class="lineClass(5, 'bottom', 'left')"></view>
									<view class="item49-lines-line1-bottom-right" :class="lineClass(5, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item49-lines-line2">
								<view class="item49-lines-line2-top">
									<view class="item49-lines-line2-top-left" :class="lineClass(2, 'top', 'left')"></view>
									<view class="item49-lines-line2-top-right" :class="lineClass(2, 'top', 'right')"></view>
								</view>
								<view class="item49-lines-line2-bottom">
									<view class="item49-lines-line2-bottom-left" :class="lineClass(14, 'bottom', 'left')"></view>
									<view class="item49-lines-line2-bottom-right" :class="lineClass(14, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item49-lines-line3">
								<view class="item49-lines-line3-top">
									<view class="item49-lines-line3-top-left" :class="lineClass(46, 'top', 'left')"></view>
									<view class="item49-lines-line3-top-right" :class="lineClass(46, 'top', 'right')"></view>
								</view>
								<view class="item49-lines-line3-bottom">
									<view class="item49-lines-line3-bottom-left" :class="lineClass(29, 'bottom', 'left')"></view>
									<view class="item49-lines-line3-bottom-right" :class="lineClass(29, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="center-content-main-energy-item5">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/triangle-white.png" class="center-content-main-energy-item5-img"></image>
							<view class="center-content-main-energy-item5-num1 size-8">
								<text :class="bgClass(21, 5)">21</text>
								<text :class="bgClass(51, 5)">51</text>
								<text :class="bgClass(26, 5)">26</text>
							</view>
							<view class="center-content-main-energy-item5-num2 size-8">
								<text :class="bgClass(40, 5)">40</text>
							</view>
						</view>
						<view class="item56-lines">
							<view class="item56-lines-line1">
								<view class="item56-lines-line1-top">
									<view class="item56-lines-line1-top-left" :class="lineClass(42, 'top', 'left')"></view>
									<view class="item56-lines-line1-top-right" :class="lineClass(42, 'top', 'right')"></view>
								</view>
								<view class="item56-lines-line1-bottom">
									<view class="item56-lines-line1-bottom-left" :class="lineClass(53, 'bottom', 'left')"></view>
									<view class="item56-lines-line1-bottom-right" :class="lineClass(53, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item56-lines-line2">
								<view class="item56-lines-line2-top">
									<view class="item56-lines-line2-top-left" :class="lineClass(3, 'top', 'left')"></view>
									<view class="item56-lines-line2-top-right" :class="lineClass(3, 'top', 'right')"></view>
								</view>
								<view class="item56-lines-line2-bottom">
									<view class="item56-lines-line2-bottom-left" :class="lineClass(60, 'bottom', 'left')"></view>
									<view class="item56-lines-line2-bottom-right" :class="lineClass(60, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item56-lines-line3">
								<view class="item56-lines-line3-top">
									<view class="item56-lines-line3-top-left" :class="lineClass(9, 'top', 'left')"></view>
									<view class="item56-lines-line3-top-right" :class="lineClass(9, 'top', 'right')"></view>
								</view>
								<view class="item56-lines-line3-bottom">
									<view class="item56-lines-line3-bottom-left" :class="lineClass(52, 'bottom', 'left')"></view>
									<view class="item56-lines-line3-bottom-right" :class="lineClass(52, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="center-content-main-energy-item6">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/triangle-white.png" class="center-content-main-energy-item6-img"></image>
							<view class="center-content-main-energy-item6-num1 size-8">
								<text :class="bgClass(48, 6)">48</text>
								<text :class="bgClass(57, 6)">57</text>
								<text :class="bgClass(44, 6)">44</text>
							</view>
							<view class="center-content-main-energy-item6-num2 size-8">
								<text :class="bgClass(18, 6)">18</text>
								<text :class="bgClass(28, 6)">28</text>
								<text :class="bgClass(32, 6)">32</text>
								<text :class="bgClass(50, 6)">50</text>
							</view>
						</view>
						<view class="center-content-main-energy-item7">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/triangle-deepGray.png" class="center-content-main-energy-item7-img"></image>
							<view class="center-content-main-energy-item7-num1 size-8">
								<text :class="bgClass(49, 7)">49</text>
								<text :class="bgClass(55, 7)">55</text>
								<text :class="bgClass(30, 7)">30</text>
							</view>
							<view class="center-content-main-energy-item7-num2 size-8">
								<text :class="bgClass(6, 7)" style="padding: 0 8rpx">6</text>
								<text :class="bgClass(37, 7)">37</text>
								<text :class="bgClass(22, 7)">22</text>
								<text :class="bgClass(36, 7)">36</text>
							</view>
						</view>
						<view class="center-content-main-energy-item8">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/cube-deepGray.png" class="center-content-main-energy-item8-img"></image>
							<view class="center-content-main-energy-item8-num1 size-8">
								<text :class="bgClass(53, 8)">53</text>
								<text :class="bgClass(60, 8)">60</text>
								<text :class="bgClass(52, 8)">52</text>
							</view>
							<view class="center-content-main-energy-item8-num2 size-8">
								<text :class="bgClass(54, 8)">54</text>
								<text :class="bgClass(38, 8)">38</text>
								<text :class="bgClass(58, 8)">58</text>
							</view>
							<view class="center-content-main-energy-item8-num3 size-8">
								<text :class="bgClass(19, 8)">19</text>
								<text :class="bgClass(39, 8)">39</text>
								<text :class="bgClass(41, 8)">41</text>
							</view>
						</view>
						<view class="center-content-main-energy-item9">
							<image src="https://h5.ztsmz.demo.ysbluo.com/humanStatic/cube-refGray.png" class="center-content-main-energy-item9-img"></image>
							<view class="center-content-main-energy-item9-num1 size-8">
								<text :class="bgClass(5, 9)" style="padding: 0 8rpx">5</text>
								<text :class="bgClass(14, 9)">14</text>
								<text :class="bgClass(29, 9)">29</text>
							</view>
							<view class="center-content-main-energy-item9-num2 size-8">
								<text :class="bgClass(34, 9)">34</text>
								<text :class="bgClass(27, 9)">27</text>
							</view>
							<view class="center-content-main-energy-item9-num3 size-8">
								<text :class="bgClass(59, 9)">59</text>
							</view>
							<view class="center-content-main-energy-item9-num4 size-8">
								<text :class="bgClass(42, 9)">42</text>
								<text :class="bgClass(3, 9)" style="padding: 0 8rpx">3</text>
								<text :class="bgClass(9, 9)" style="padding: 0 8rpx">9</text>
							</view>
						</view>
						<view class="item36-lines">
							<view class="item36-lines-line1">
								<view class="item36-lines-line1-top">
									<view class="item36-lines-line1-top-left" :class="lineClass(16, 'top', 'left')"></view>
									<view class="item36-lines-line1-top-right" :class="lineClass(16, 'top', 'right')"></view>
								</view>
								<view class="item36-lines-line1-bottom">
									<view class="item36-lines-line1-bottom-left" :class="lineClass(48, 'bottom', 'left')"></view>
									<view class="item36-lines-line1-bottom-right" :class="lineClass(48, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item36-lines-line2">
								<view class="item36-lines-line2-top">
									<view class="item36-lines-line2-top-left" :class="lineClass(20, 'top', 'left')"></view>
									<view class="item36-lines-line2-top-right" :class="lineClass(20, 'top', 'right')"></view>
								</view>
								<view class="item36-lines-line2-bottom">
									<view class="item36-lines-line2-bottom-left" :class="lineClass(57, 'bottom', 'left')"></view>
									<view class="item36-lines-line2-bottom-right" :class="lineClass(57, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="item37-lines">
							<view class="item37-lines-line1">
								<view class="item37-lines-line1-top">
									<view class="item37-lines-line1-top-left" :class="lineClass(35, 'top', 'left')"></view>
									<view class="item37-lines-line1-top-right" :class="lineClass(35, 'top', 'right')"></view>
								</view>
								<view class="item37-lines-line1-bottom">
									<view class="item37-lines-line1-bottom-left" :class="lineClass(36, 'bottom', 'left')"></view>
									<view class="item37-lines-line1-bottom-right" :class="lineClass(36, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item37-lines-line2">
								<view class="item37-lines-line2-top">
									<view class="item37-lines-line2-top-left" :class="lineClass(12, 'top', 'left')"></view>
									<view class="item37-lines-line2-top-right" :class="lineClass(12, 'top', 'right')"></view>
								</view>
								<view class="item37-lines-line2-bottom">
									<view class="item37-lines-line2-bottom-left" :class="lineClass(22, 'bottom', 'left')"></view>
									<view class="item37-lines-line2-bottom-right" :class="lineClass(22, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item37-lines-line3">
								<view class="item37-lines-line3-top">
									<view class="item37-lines-line3-top-left" :class="lineClass(45, 'top', 'left')"></view>
									<view class="item37-lines-line3-top-right" :class="lineClass(45, 'top', 'right')"></view>
								</view>
								<view class="item37-lines-line3-bottom">
									<view class="item37-lines-line3-bottom-left" :class="lineClass(21, 'bottom', 'left')"></view>
									<view class="item37-lines-line3-bottom-right" :class="lineClass(21, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item37-lines-line4">
								<view class="item37-lines-line4-top">
									<view class="item37-lines-line4-top-left" :class="lineClass(40, 'top', 'left')"></view>
									<view class="item37-lines-line4-top-right" :class="lineClass(40, 'top', 'right')"></view>
								</view>
								<view class="item37-lines-line4-bottom">
									<view class="item37-lines-line4-bottom-left" :class="lineClass(37, 'bottom', 'left')"></view>
									<view class="item37-lines-line4-bottom-right" :class="lineClass(37, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
						<view class="item45-lines">
							<view class="item45-lines-line1">
								<view class="item45-lines-line1-top">
									<view class="item45-lines-line1-top-left" :class="lineClass(26, 'top', 'left')"></view>
									<view class="item45-lines-line1-top-right" :class="lineClass(26, 'top', 'right')"></view>
								</view>
								<view class="item45-lines-line1-bottom">
									<view class="item45-lines-line1-bottom-left" :class="lineClass(44, 'bottom', 'left')"></view>
									<view class="item45-lines-line1-bottom-right" :class="lineClass(44, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item45-lines-line2">
								<view class="item45-lines-line2-top">
									<view class="item45-lines-line2-top-left"></view>
									<view class="item45-lines-line2-top-right"></view>
								</view>
								<view class="item45-lines-line2-bottom">
									<view class="item45-lines-line2-bottom-left"></view>
									<view class="item45-lines-line2-bottom-right"></view>
								</view>
							</view>
						</view>
						<view class="item69-lines">
							<view class="item69-lines-line1">
								<view class="item69-lines-line1-top">
									<view class="item69-lines-line1-top-left" :class="lineClass(27, 'top', 'left')"></view>
									<view class="item69-lines-line1-top-right" :class="lineClass(27, 'top', 'right')"></view>
								</view>
								<view class="item69-lines-line1-bottom">
									<view class="item69-lines-line1-bottom-left" :class="lineClass(50, 'bottom', 'left')"></view>
									<view class="item69-lines-line1-bottom-right" :class="lineClass(50, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item69-lines-line2">
								<view class="item69-lines-line2-top">
									<view class="item69-lines-line2-top-left"></view>
									<view class="item69-lines-line2-top-right"></view>
								</view>
								<view class="item69-lines-line2-bottom">
									<view class="item69-lines-line2-bottom-left"></view>
									<view class="item69-lines-line2-bottom-right"></view>
								</view>
							</view>
						</view>
						<view class="item79-lines">
							<view class="item79-lines-line1">
								<view class="item79-lines-line1-top">
									<view class="item79-lines-line1-top-left" :class="lineClass(59, 'top', 'left')"></view>
									<view class="item79-lines-line1-top-right" :class="lineClass(59, 'top', 'right')"></view>
								</view>
								<view class="item79-lines-line1-bottom">
									<view class="item79-lines-line1-bottom-left" :class="lineClass(6, 'bottom', 'left')"></view>
									<view class="item79-lines-line1-bottom-right" :class="lineClass(6, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item79-lines-line2">
								<view class="item79-lines-line2-top">
									<view class="item79-lines-line2-top-left"></view>
									<view class="item79-lines-line2-top-right"></view>
								</view>
								<view class="item79-lines-line2-bottom">
									<view class="item79-lines-line2-bottom-left"></view>
									<view class="item79-lines-line2-bottom-right"></view>
								</view>
							</view>
						</view>
						<view class="item68-lines">
							<view class="item68-lines-line1">
								<view class="item68-lines-line1-top">
									<view class="item68-lines-line1-top-left" :class="lineClass(58, 'top', 'left')"></view>
									<view class="item68-lines-line1-top-right" :class="lineClass(58, 'top', 'right')"></view>
								</view>
								<view class="item68-lines-line1-bottom">
									<view class="item68-lines-line1-bottom-left" :class="lineClass(32, 'bottom', 'left')"></view>
									<view class="item68-lines-line1-bottom-right" :class="lineClass(32, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item68-lines-line2">
								<view class="item68-lines-line2-top">
									<view class="item68-lines-line2-top-left" :class="lineClass(38, 'top', 'left')"></view>
									<view class="item68-lines-line2-top-right" :class="lineClass(38, 'top', 'right')"></view>
								</view>
								<view class="item68-lines-line2-bottom">
									<view class="item68-lines-line2-bottom-left" :class="lineClass(28, 'bottom', 'left')"></view>
									<view class="item68-lines-line2-bottom-right" :class="lineClass(28, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item68-lines-line3">
								<view class="item68-lines-line3-top">
									<view class="item68-lines-line3-top-left" :class="lineClass(58, 'top', 'left')"></view>
									<view class="item68-lines-line3-top-right" :class="lineClass(58, 'top', 'right')"></view>
								</view>
								<view class="item68-lines-line3-bottom">
									<view class="item68-lines-line3-bottom-left" :class="lineClass(18, 'bottom', 'left')"></view>
									<view class="item68-lines-line3-bottom-right" :class="lineClass(18, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>

						<view class="item78-lines">
							<view class="item78-lines-line1">
								<view class="item78-lines-line1-top">
									<view class="item78-lines-line1-top-left" :class="lineClass(19, 'top', 'left')"></view>
									<view class="item78-lines-line1-top-right" :class="lineClass(19, 'top', 'right')"></view>
								</view>
								<view class="item78-lines-line1-bottom">
									<view class="item78-lines-line1-bottom-left" :class="lineClass(49, 'bottom', 'left')"></view>
									<view class="item78-lines-line1-bottom-right" :class="lineClass(49, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item78-lines-line2">
								<view class="item78-lines-line2-top">
									<view class="item78-lines-line2-top-left" :class="lineClass(39, 'top', 'left')"></view>
									<view class="item78-lines-line2-top-right" :class="lineClass(39, 'top', 'right')"></view>
								</view>
								<view class="item78-lines-line2-bottom">
									<view class="item78-lines-line2-bottom-left" :class="lineClass(55, 'bottom', 'left')"></view>
									<view class="item78-lines-line2-bottom-right" :class="lineClass(55, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item78-lines-line3">
								<view class="item78-lines-line3-top">
									<view class="item78-lines-line3-top-left" :class="lineClass(41, 'top', 'left')"></view>
									<view class="item78-lines-line3-top-right" :class="lineClass(41, 'top', 'right')"></view>
								</view>
								<view class="item78-lines-line3-bottom">
									<view class="item78-lines-line3-bottom-left" :class="lineClass(30, 'bottom', 'left')"></view>
									<view class="item78-lines-line3-bottom-right" :class="lineClass(30, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>

						<view class="item469-lines">
							<view class="item469-lines-line1">
								<view class="item469-lines-line1-top">
									<view class="item469-lines-line1-top-left" :class="lineClass(10, 'top', 'left')"></view>
									<view class="item469-lines-line1-top-right" :class="lineClass(10, 'top', 'right')"></view>
								</view>
								<view class="item469-lines-line1-bottom">
									<view class="item469-lines-line1-bottom-left" :class="lineClass(10, 'bottom', 'left')"></view>
									<view class="item469-lines-line1-bottom-right" :class="lineClass(10, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item469-lines-line2">
								<view class="item469-lines-line2-top">
									<view class="item469-lines-line2-top-left" :class="lineClass(34, 'top', 'left')"></view>
									<view class="item469-lines-line2-top-right" :class="lineClass(34, 'top', 'right')"></view>
								</view>
								<view class="item469-lines-line2-bottom">
									<view class="item469-lines-line2-bottom-left" :class="lineClass(34, 'bottom', 'left')"></view>
									<view class="item469-lines-line2-bottom-right" :class="lineClass(34, 'bottom', 'right')"></view>
								</view>
							</view>
							<view class="item469-lines-line3">
								<view class="item469-lines-line3-top">
									<view class="item469-lines-line3-top-left" :class="lineClass(34, 'top', 'left')"></view>
									<view class="item469-lines-line3-top-right" :class="lineClass(34, 'top', 'right')"></view>
								</view>
								<view class="item469-lines-line3-bottom">
									<view class="item469-lines-line3-bottom-left" :class="lineClass(34, 'bottom', 'left')"></view>
									<view class="item469-lines-line3-bottom-right" :class="lineClass(34, 'bottom', 'right')"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 右边箭头 -->
				<view class="arrow-right">
					<view class="arrow-right-one">
						<view class="arrow-right-one-triangle"></view>
						<view class="arrow-right-one-cube">
							<view class="" style="position: relative">
								<view class="">5</view>
								<text
									class="iconfont icon-hexagon sanjiao-size"
									style="position: absolute; top: -11rpx; font-size: 40rpx !important; right: -15rpx; transform: rotate(30deg)"
								></text>
							</view>
							<view class="" style="position: relative">
								<view class="">6</view>
								<text
									class="iconfont icon-xiangshangsanjiaoxing sanjiao-size"
									style="position: absolute; top: -16rpx; font-size: 48rpx !important; right: -19rpx"
								></text>
							</view>
						</view>
					</view>
					<view class="arrow-right-two">
						<view class="arrow-right-two-cube">
							<view class="" style="position: relative">
								<view class="">1</view>
								<text
									class="iconfont icon-hexagon sanjiao-size"
									style="position: absolute; top: -11rpx; font-size: 40rpx !important; right: -15rpx; transform: rotate(30deg)"
								></text>
							</view>
							<view class="" style="position: relative">
								<view class="">1</view>
								<text
									class="iconfont icon-xiangshangsanjiaoxing sanjiao-size"
									style="position: absolute; top: -16rpx; font-size: 48rpx !important; right: -22rpx"
								></text>
							</view>
						</view>
						<view class="arrow-right-two-triangle"></view>
					</view>
				</view>
			</view>
			<view class="right-side">
				<view class="right-side-item" v-for="item in resultHideList">
					<view>
						<image class="icon-size" :src="item.imageUrl" mode="" style="vertical-align: middle;"></image>
					</view>
					<view>{{ item.num }}</view>
					<text class="iconfont icon-sanjiaoxing1 sanjiao-size sanjiao-position" ></text>
				</view>
			</view>
		</view>
	</view>
	<view style="text-align: center; margin-top: 50rpx" class="">
		主题切换
		<u-switch style="margin: auto" v-model="currentTheme" @change="changeTheme"></u-switch>
	</view>
	<myTabbar :tabBarList="tabBarList" :currentPath="'/pages/index/index'"></myTabbar>
</template>

<script setup>
import { ref, watch } from 'vue';
import { onReady, onLoad } from '@dcloudio/uni-app';
import themeStore from '@/store/theme.js';
import myTabbar from '../../components/Tabbar/index.vue';

// import {
// 	calculatePlanetData,
// 	calLongFromDate,
// 	calculateDesignDate,
// 	calculateText,
// 	calculateDreamText,
// 	calculateMoonDesignDate,
// } from '@/comom/tools/calculations.js'
// import {$moshier,$julian,$processor,$const} from '@/comom/tools/ephemeris-0.1.0.js'
const canvas = ref();
const { themeClass, changeTheme, theme } = themeStore();
watch(themeClass, (val) => {
	themeClass.value;
	console.log(val, themeClass.value, 'themeee');
});
const contact = (e) => {
	console.log(e, '客服消息');
};
const currentTheme = ref(false);
const resultHideList = ref([
	{
		num: '3.6',

		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon1.png'
	},
	{
		num: '50.6',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon2.png'
	},
	{
		num: '49.3',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon3.png'
	},
	{
		num: '4.3',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon4.png'
	},
	{
		num: '36.3',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon5.png'
	},
	{
		num: '3.2',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon6.png'
	},
	{
		num: '25.1',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon7.png'
	},
	{
		num: '61.4',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon8.png'
	},
	{
		num: '34.6',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon9.png'
	},

	{
		num: '23.5',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon10.png'
	},
	{
		num: '48.2',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon11.png'
	},
	{
		num: '34.3',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon12.png'
	},
	{
		num: '6.6',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/icon13.png'
	}
]);
const resultShowList = ref([
	{
		num: '41.2',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed1.jpg'
	},
	{
		num: '31.2',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed2.png'
	},
	{
		num: '49.6',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed3.png'
	},
	{
		num: '4.6',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed4.png'
	},
	{
		num: '10.1',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed5.png'
	},
	{
		num: '38.1',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed6.png'
	},
	{
		num: '5.6',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed7.png'
	},
	{
		num: '34.1',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed8.png'
	},
	{
		num: '34.2',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed9.png'
	},
	{
		num: '2.3',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed10.png'
	},
	{
		num: '48.5',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed11.png'
	},
	{
		num: '34.3',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed12.png'
	},
	{
		num: '46.2',
		imageUrl: 'https://h5.ztsmz.demo.ysbluo.com/humanStatic/iconRed13.png'
	}
]);
const setBg = () => {};
const lineClass = (num, yDirect, xDirect) => {
	const hasShow = resultShowList.value.some((item) => Math.floor(item.num) === Number(num));
	const redClass = hasShow ? 'redLine' : '';
	const hasHide = resultHideList.value.some((item) => Math.floor(item.num) === Number(num));
	const blackClass = hasHide ? 'blackLine' : '';
	if (yDirect === 'top' && xDirect === 'left') {
		return blackClass ? blackClass : redClass ? redClass : '';
	} else if (yDirect === 'top' && xDirect === 'right') {
		return redClass ? redClass : blackClass ? blackClass : '';
	} else if (yDirect === 'bottom' && xDirect === 'right') {
		return redClass ? redClass : blackClass ? blackClass : '';
	} else if (yDirect === 'bottom' && xDirect === 'left') {
		return blackClass ? blackClass : redClass ? redClass : '';
	}
};

const bgClass = (num, curEnergy) => {
	const hasHide = resultHideList.value.some((item) => Math.floor(item.num) === Number(num));
	const hasShow = resultShowList.value.some((item) => Math.floor(item.num) === Number(num));
	if (hasShow || hasHide) {
		return `center-content-main-energy-item${curEnergy}-bg`;
	}
};

onReady(() => {});
onLoad((options) => {
	uni.setNavigationBarTitle({
		title: options.userName || '人类图'
	});
	// uni.request({
	//     url: 'http://47.120.0.57/other_js/ephemeris_data.json', //仅为示例，并非真实接口地址。
	// 	dataType:'json',
	//     success: requestBasicData,
	// 	fail:(res) => {
	// 		console.info(res);
	// 	}
	// });
});
const requestBasicData = (res) => {
	$moshier.col_param = res.data;
	//这个是出生日期和时间，后期要从前端界面获取
	let birth = {
		year: 2000,
		month: 1,
		day: 1,
		hour: 0,
		minute: 0
	};
	//出生的地区，也要从界面上获取
	const timezone = 8;
	calcuMyChats(birth, timezone);
};
const calcuMyChats = (birth, timezone) => {
	const i = new Date(birth.year, birth.month - 1, birth.day, birth.hour, birth.minute, 0, 0);
	const o = new Date(i.getTime() - timezone * 60 * 60 * 1e3);

	var t = {
		year: o.getFullYear(),
		month: o.getMonth() + 1,
		day: o.getDate(),
		hours: o.getHours(),
		minutes: o.getMinutes(),
		seconds: 0
	};

	$processor.init();
	const personality = [];
	const design = [];
	var s = calLongFromDate(t, $moshier.body.sun);
	var d = $julian.calc(t);

	calculatePlanetData(personality, d, 'personality');
	var r = calculateDesignDate(d, s);
	calculatePlanetData(design, r.julian, 'design');
	const m = r.julian;
	const c = new Date(r.year, r.month - 1, r.day, r.hours, r.minutes, r.seconds, 0);
	$const.birthChart = {
		planetsR: personality,
		planetsL: design,
		personalityJul: d,
		personalityDate: o,
		personalityDateLocal: i,
		designDate: c,
		designJul: m
	};
	calculateText($const.birthChart);
	const g = [];
	const p = [62, 20, 8, 12, 1, 15, 42, 27, 5, 38, 53, 19, 28, 50, 57];
	r = calculateMoonDesignDate(d, personality[2].longitude);
	calculatePlanetData(g, r.julian, 'design');
	$const.dreamChart = {
		planetsR: personality.filter((t) => p.includes(t.Gate)),
		planetsL: g.filter((t) => p.includes(t.Gate)),
		personalityJul: d,
		personalityDate: o,
		personalityDateLocal: i,
		designDate: new Date(r.year, r.month - 1, r.day, r.hours, r.minutes, r.seconds, 0),
		designJul: r.julian
	};
	calculateDreamText($const.dreamChart);
};
// humanCanvas
const intiDraw = async function () {
	// 获取 Canvas 组件的上下文对象
	const ctx = uni.createCanvasContext('humanCanvas');
	const ep = new easyposter({ ctx });
	console.log(ep, '绘画实列');
	initLeftArrow(ctx);
	initRightArrow(ctx);
	initMainChunk(ctx);
	ctx.draw();
};
const initLeftArrow = (ctx) => {
	// 设置箭头的样式
	ctx.strokeStyle = '#e64d2a';
	ctx.fillStyle = '#e64d2a';
	// =========右边箭头===========//
	// 绘制箭头的直线部分
	ctx.beginPath();
	ctx.moveTo(10, 30);
	ctx.lineTo(50, 30);
	ctx.lineWidth = 20;
	ctx.stroke();

	// 绘制箭头的三角形部分
	ctx.beginPath();
	ctx.moveTo(70, 30);
	ctx.lineTo(50, 15);
	ctx.lineTo(50, 45);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#fff';
	// 绘制三角形边框
	ctx.beginPath();
	ctx.moveTo(51, 36);
	ctx.lineTo(43, 22);
	ctx.lineTo(35, 36);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	// 绘制6边形边框
	ctx.beginPath();
	ctx.moveTo(23, 23);
	ctx.lineTo(16, 27);
	ctx.lineTo(16, 35);
	ctx.lineTo(23, 38);
	ctx.lineTo(31, 35);
	ctx.lineTo(31, 27);

	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	ctx.strokeStyle = '#e64d2a';
	//绘制文字样式
	ctx.beginPath();
	ctx.moveTo(70, 75);
	ctx.lineTo(50, 60);
	ctx.lineTo(50, 90);
	ctx.closePath();
	// 绘制箭头的直线部分
	ctx.beginPath();
	ctx.moveTo(10, 75);
	ctx.lineTo(50, 75);
	ctx.lineWidth = 20;
	ctx.stroke();

	// 绘制箭头的三角形部分
	ctx.beginPath();
	ctx.moveTo(70, 75);
	ctx.lineTo(50, 60);
	ctx.lineTo(50, 90);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#fff';
	// 绘制三角形边框
	ctx.beginPath();
	ctx.moveTo(51, 81);
	ctx.lineTo(43, 67);
	ctx.lineTo(35, 81);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	// 绘制6边形边框
	ctx.beginPath();
	ctx.moveTo(23, 68);
	ctx.lineTo(16, 72);
	ctx.lineTo(16, 80);
	ctx.lineTo(23, 83);
	ctx.lineTo(31, 80);
	ctx.lineTo(31, 72);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	ctx.strokeStyle = '#e64d2a';
	// 设置文字的样式
	ctx.font = '20rpx Arial';
	ctx.textAlign = 'center';
	ctx.fillStyle = 'white';

	// 绘制直线部分的文字
	ctx.fillText('6     5', 33, 35);
	ctx.fillText('1     4', 33, 80);
};
const initRightArrow1 = (ctx) => {
	console.log(canvas.value.$el.style.width, 'getBoundingClientRect');
	// 设置箭头的样式
	ctx.strokeStyle = '#e64d2a';
	ctx.fillStyle = '#e64d2a';
	ctx.textAlign = 'right';
	// =========右边箭头===========//
	// 绘制箭头的直线部分
	ctx.beginPath();
	ctx.moveTo(10, 30);
	ctx.lineTo(50, 30);
	ctx.lineWidth = 20;
	ctx.stroke();

	// 绘制箭头的三角形部分
	ctx.beginPath();
	ctx.moveTo(70, 30);
	ctx.lineTo(50, 15);
	ctx.lineTo(50, 45);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#fff';
	// 绘制三角形边框
	ctx.beginPath();
	ctx.moveTo(51, 36);
	ctx.lineTo(43, 22);
	ctx.lineTo(35, 36);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	// 绘制6边形边框
	ctx.beginPath();
	ctx.moveTo(23, 23);
	ctx.lineTo(16, 27);
	ctx.lineTo(16, 35);
	ctx.lineTo(23, 38);
	ctx.lineTo(31, 35);
	ctx.lineTo(31, 27);

	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	ctx.strokeStyle = '#e64d2a';
	//绘制文字样式
	ctx.beginPath();
	ctx.moveTo(70, 75);
	ctx.lineTo(50, 60);
	ctx.lineTo(50, 90);
	ctx.closePath();
	// 绘制箭头的直线部分
	ctx.beginPath();
	ctx.moveTo(10, 75);
	ctx.lineTo(50, 75);
	ctx.lineWidth = 20;
	ctx.stroke();

	// 绘制箭头的三角形部分
	ctx.beginPath();
	ctx.moveTo(70, 75);
	ctx.lineTo(50, 60);
	ctx.lineTo(50, 90);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#fff';
	// 绘制三角形边框
	ctx.beginPath();
	ctx.moveTo(51, 81);
	ctx.lineTo(43, 67);
	ctx.lineTo(35, 81);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	// 绘制6边形边框
	ctx.beginPath();
	ctx.moveTo(23, 68);
	ctx.lineTo(16, 72);
	ctx.lineTo(16, 80);
	ctx.lineTo(23, 83);
	ctx.lineTo(31, 80);
	ctx.lineTo(31, 72);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	ctx.strokeStyle = '#e64d2a';
	// 设置文字的样式
	ctx.font = '20rpx Arial';
	ctx.textAlign = 'center';
	ctx.fillStyle = 'white';

	// 绘制直线部分的文字
	ctx.fillText('6     5', 33, 35);
	ctx.fillText('1     4', 33, 80);
};
const initRightArrow = (ctx) => {
	// 设置箭头的样式
	ctx.strokeStyle = '#000';
	ctx.fillStyle = '#000';
	// =========右边箭头===========//
	// 绘制箭头的直线部分
	ctx.beginPath();
	ctx.moveTo(160, 30);
	ctx.lineTo(200, 30);
	ctx.lineWidth = 20;
	ctx.stroke();

	// 绘制箭头的三角形部分
	ctx.beginPath();
	ctx.moveTo(220, 30);
	ctx.lineTo(200, 15);
	ctx.lineTo(200, 45);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#fff';
	// 绘制三角形边框
	ctx.beginPath();
	ctx.moveTo(201, 36);
	ctx.lineTo(193, 22);
	ctx.lineTo(185, 36);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	// 绘制6边形边框
	ctx.beginPath();
	ctx.moveTo(173, 23);
	ctx.lineTo(166, 27);
	ctx.lineTo(166, 35);
	ctx.lineTo(173, 38);
	ctx.lineTo(181, 35);
	ctx.lineTo(181, 27);

	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	ctx.strokeStyle = '#000';
	//绘制文字样式
	ctx.beginPath();
	ctx.moveTo(240, 75);
	ctx.lineTo(220, 60);
	ctx.lineTo(220, 90);
	ctx.closePath();
	// 绘制箭头的直线部分
	ctx.beginPath();
	ctx.moveTo(180, 75);
	ctx.lineTo(220, 75);
	ctx.lineWidth = 20;
	ctx.stroke();

	// 绘制箭头的三角形部分
	ctx.beginPath();
	ctx.moveTo(160, 75);
	ctx.lineTo(180, 60);
	ctx.lineTo(180, 90);
	ctx.closePath();
	ctx.fill();
	ctx.strokeStyle = '#fff';
	// 绘制三角形边框
	ctx.beginPath();
	ctx.moveTo(376, 81);
	ctx.lineTo(208, 67);
	ctx.lineTo(200, 81);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	// 绘制6边形边框
	ctx.beginPath();
	ctx.moveTo(188, 68);
	ctx.lineTo(181, 72);
	ctx.lineTo(181, 80);
	ctx.lineTo(188, 83);
	ctx.lineTo(196, 80);
	ctx.lineTo(196, 72);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.stroke();

	ctx.strokeStyle = '#000';
	// 设置文字的样式
	ctx.font = '20rpx Arial';
	ctx.textAlign = 'center';
	ctx.fillStyle = 'white';

	// 绘制直线部分的文字
	ctx.fillText('5     6', 183, 35);
	ctx.fillText('1     1', 198, 80);
};

const initMainChunk = (ctx) => {
	// 头能量中心绘制
	ctx.fillStyle = '#fff';
	ctx.strokeStyle = '#ccc';
	ctx.beginPath();
	ctx.moveTo(115, 10);
	// ctx.arcTo(10, 10, 10,10, 20);
	ctx.lineTo(85, 50);
	ctx.lineTo(145, 50);
	ctx.closePath();
	ctx.lineWidth = 1;
	ctx.lineJoin = 'round';
	ctx.lineCap = 'round';
	ctx.stroke();
};
</script>

<style lang="scss" scoped>
@import './config/index.scss';
</style>
